<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承是构造函数原型的继承，而不是构造函数继承</title>
</head>
<body>
    <script>
        let User = function(){};
        User.prototype.name = function(){
            console.log('User原型中的name方法');
        }
        let use = new User();
        use.name();


        let Admin = function(){};
        // // 如果是构造函数继承
        // Admin.prototype = User.prototype;
        // 如果是构造函数原型继承
        Admin.prototype.__proto__ = User.prototype;
        Admin.prototype.role = function(){
            console.log('Admin中的role方法');
        }
        let admin = new Admin();
        


        let Member = function(){};
        // // 如果是构造函数继承
        // Member.prototype = User.prototype;
        // 如果是构造函数原型继承

        // 使用Object.setPrototypeOf()和__proto__设置构造函数原型时，构造函数添加方法和设置构造函数原型的顺序是随意的,只是改变了构造函数原型的原型
        // Member.prototype.role = function(){
        //     console.log('Member中的role方法');
        // }
        // let member = new Member();
        // Member.prototype.__proto__ = User.prototype;

        // 而使用create设置构造函数原型时，必须要先设置构造函数的原型，再给构造函数添加方法，因为它是又新建了一个构造函数的原型，里面没有之前的方法
        Member.prototype = Object.create(User.prototype);
        Member.prototype.role = function(){
            console.log('Member中的role方法');
        }
        let member = new Member();
        
        // // 错误一：新建了一个构造函数的原型，它里面没有之前的方法
        // Member.prototype.role = function(){
        //     console.log('Member中的role方法');
        // }
        // Member.prototype = Object.create(User.prototype);
        // let member = new Member();

        // // 错误二：member还是指向原来的Member.prototype
        // Member.prototype.role = function(){
        //     console.log('Member中的role方法');
        // }
        // let member = new Member();
        // Member.prototype = Object.create(User.prototype);
        

        // 如果是构造函数继承,结果都是后者中的role
        // 如果是构造函数原型的继承,结果是各自原型中的role
        admin.name();
        member.name();
        admin.role();
        member.role();

    </script>
</body>
</html>